<template>
  <swiper :options="swiperOption" class="md-container" ref="mySwiper">
    <swiper-slide class="md-page-slide">
      <slot></slot>
      <div class="block" style="height:90px;">
      </div>
    </swiper-slide>
    <div class="swiper-scrollbar" slot="scrollbar"></div>
  </swiper>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";

export default {
  components: { swiper, swiperSlide },
  data () {
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 'auto',
        freeMode: true,
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: true
        },
        mousewheel: true,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true // 修改swiper的父元素时，自动初始化swiper
      }
    };
  }
};
</script>

<style>
.md-container {
  overflow: hidden;
}
.md-page-slide {
  height: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.swiper-scrollbar {
  width: 3px !important;
}
.swiper-scrollbar-drag {
  background: rgba(0, 0, 0, 0.2) !important;
}
</style>
